<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="utf-8" />
<title>wicket-foundation</title>
</head>
<body>
	<wicket:extend>

		<div class="row">
			<h1 id="side-nav">Side Nav</h1>
			<h3 class="subheader">Side nav, like you see on the Foundation
				docs, is a great way to provide navigation for your entire site, or
				for sections of an individual page.</h3>

			<hr>
			<h3>Basic</h3>

			<p>You can create a side nav using minimal markup.</p>
			<div>
				<div>
				
          <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">wicket:id</span>=<span class="value">&quot;basic&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>

          <h4>Java</h4>
<pre><code class="language-html"><div class="code-container">List&lt;SideNavItem&gt; basicItems = new ArrayList&lt;&gt;();
basicItems.add(new SideNavLinkItem(&quot;Link 1&quot;));
basicItems.add(new SideNavLinkItem(&quot;Link 2&quot;));
basicItems.add(new SideNavLinkItem(&quot;Link 3&quot;));
basicItems.add(new SideNavLinkItem(&quot;Link 4&quot;));
add(new FoundationSideNav(&quot;basic&quot;, basicItems) {
	@Override
	public AbstractLink createLink(final String id, int idx) {
		return new AjaxLink&lt;Void&gt;(id) {
			@Override
			public void onClick(AjaxRequestTarget target) {
				target.appendJavaScript(String.format(&quot;alert('%s');&quot;, id));
			}
		};
	}
});
</div></code>
</pre>

				</div>
				<div>
					<h4>Rendered HTML</h4>
					<div wicket:id="basic"></div>
				</div>
			</div>

			<h3>Advanced</h3>

			<p>Additional classes can be added to your side nav to change its
				appearance.</p>
			<div>
				<div>
				
          <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">wicket:id</span>=<span class="value">&quot;advanced&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>

          <h4>Java</h4>
<pre><code class="language-html"><div class="code-container">List&lt;SideNavItem&gt; advancedItems = new ArrayList&lt;&gt;();
advancedItems.add(new SideNavHeaderItem(&quot;Header&quot;));
advancedItems.add(new SideNavLinkItem(&quot;Link 1&quot;, true));
advancedItems.add(new SideNavLinkItem(&quot;Link 2&quot;));
advancedItems.add(new SideNavDividerItem());
advancedItems.add(new SideNavLinkItem(&quot;Link 3&quot;));
advancedItems.add(new SideNavLinkItem(&quot;Link 4&quot;));
add(new FoundationSideNav(&quot;advanced&quot;, advancedItems) {
	@Override
	public AbstractLink createLink(final String id, final int idx) {
		return new AjaxLink&lt;Void&gt;(id) {
			@Override
			public void onClick(AjaxRequestTarget target) {
				target.appendJavaScript(String.format(&quot;alert('%d');&quot;, idx));
			}
		};
	}
});
</div></code>
</pre>

				</div>
				<div>
					<h4>Rendered HTML</h4>
					<div wicket:id="advanced"></div>
				</div>
			</div>
		</div>
	</wicket:extend>
</body>
</html>
